<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The City List Page</h1>
    <table id="city-table"></table>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/table.js"></script>
<script>
    var cityColumns=[{title:"id"},{title:"city"},{title:"operation"}];
    $(function(){ //页面加载完成以后执行
        debugger
        doInit("city-table",cityColumns);//创建thead,tbody
        //异步加载服务端数据
        doLoadCitys();
    })
    //异步加载服务端citys信息
    function doLoadCitys(){
        $.ajax({
            url:"/doAjaxGet",
            success(result){//readyState==4 && status==200
                //console.log(result);
                doSetTableBodyRows($("#city-table>tbody"),result);
            }
        });
    }
    //将服务端响应的结果更新到页面table的tbody位置
    function doSetTableBodyRows(tBody,result){
        //清空tbody原有内容
        tBody.empty();
        //迭代服务端的响应结果，并将其追加到tbody
        //方法1
        // for(let i=0;i<result.length;i++){
        //      tBody.append(doCreateRow(result[i]));
        // }
        //方法2
        //  result.forEach(function(item) {
        //      tBody.append(doCreateRow(item));
        //  })
        //方法3
        result.forEach(item=>tBody.append(doCreateRow(item)));
    }
    function doCreateRow(row){
        return `<tr>
                      <td>${row.id}</td>
                      <td>${row.city}</td>
                      <td><a href='javascript:doDeleteById(${row.id})'>delete</td>
                   </tr>`
    }
    function doDeleteById(id){
        $.ajax({
            url:`/doAjaxDelete/${id}`,
            method:"delete",
            success(result){
                alert(result);
                doLoadCitys();//刷新
            }
        })
    }
</script>
</body>
</html>